import classNames from 'classnames';
import salaryStyle from '@/pages/SalaryManage/salaryManage.less';
import { Col, Divider, Row, Typography, Empty } from 'antd';
import If from '@/components/If';
import React, { useContext } from 'react';
import DateFormatter from '@/components/DateFormatter';
import SalaryItem from '../SalaryItem';
import Context from '../../context';

import style from './index.less';

const { Text } = Typography;

const SalaryItemTitle = ({ type = 'add' }) => {
    const mapper = {
        add: {
            icon: 'iconsalary_add_icon',
            color: 'rgba(79, 216, 123, 1)',
            text: '薪资加项'
        },
        minus: {
            icon: 'iconsalary_minus_icon',
            color: 'rgba(255, 121, 67, 1)',
            text: '薪资减项'
        }
    };
    const item = mapper[type === 'add' ? 'add' : 'minus'];

    return (
        <div>
            <i className={classNames('icon', 'iconfont', item.icon, salaryStyle.mr8)} style={{ color: item.color }} />
            <Text>{item.text}</Text>
        </div>
    );
};

const monthName = month => {
    const monthMapper = {
        1: '一',
        2: '二',
        3: '三',
        4: '四',
        5: '五',
        6: '六',
        7: '七',
        8: '八',
        9: '九',
        10: '十',
        11: '十一',
        12: '十二'
    };
    return monthMapper[month];
};

const MonthSalaryTemplate = ({ data, onMouseEnter = () => ({}), prefix = '', showChange = false, compareData = {} }) => {
    // 日期是否变更
    const generateDateChanged = data?.generateDate !== compareData?.generateDate;
    const { contextState, setContextState } = useContext(Context);

    const doMouseEnter = (salaryTemplate, event) => {
        onMouseEnter(salaryTemplate, event);
        setContextState({ ...contextState, currentPosition: prefix, currentTemplate: salaryTemplate });
    };

    return <div
        className={style.monthSalaryTemplate}
        data-monthsalarytemplate={data.month}
        data-prefix={prefix}
        onMouseEnter={event => doMouseEnter(data, event)}
    >
        <div className={style.monthSalaryTemplateCaption}>
            <Text className={classNames(salaryStyle.bold, salaryStyle.mr16, salaryStyle.fontBig)}>
                {monthName([data.month])}月
            </Text>
            <span
                className="text-third"
                style={showChange && generateDateChanged ? { color: 'red' } : null}>
                <DateFormatter value={data.generateDate} pattern="MM-DD" emptyMessage="MM-DD"/>
            </span>
            <Divider type="vertical"/>
            <Text className="text-secondary">生成薪资条</Text>
        </div>
        <div className={style.monthSalaryTemplateP}>
            <Row gutter={32} type="flex">
                <Col>
                    <Text type="secondary">创建人：</Text>
                    {data.createName}
                </Col>
                <Col>
                    <Text type="secondary">创建时间：</Text>
                    <DateFormatter value={data.createTime} pattern="YYYY-MM-DD HH:mm:ss"/>
                </Col>
            </Row>
        </div>
        <div className={style.monthSalaryTemplateContent}>
            <If condition={!(data?.usedAddSalaryItems?.length > 0 || data?.usedLessSalaryItems?.length > 0)}>
                <div className={classNames(style.monthSalaryTemplateContentBody, style.emptyBody)}>
                    <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
                </div>
            </If>
            <If condition={data?.usedAddSalaryItems?.length > 0}>
                <SalaryItemTitle type="add"/>
                <Row type="flex" gutter={12} className={style.monthSalaryTemplateContentBody}>
                    {data?.usedAddSalaryItems?.map(item => (
                        <Col key={item.id}>
                            <SalaryItem
                                item={item}
                                showChange={showChange}
                                prefix={prefix}
                                parentData={data}
                            />
                        </Col>
                    ))}
                </Row>
            </If>
            <If condition={data?.usedLessSalaryItems?.length > 0}>
                <SalaryItemTitle type="reduce"/>
                <Row type="flex" gutter={12} className={style.monthSalaryTemplateContentBody}>
                    {data?.usedLessSalaryItems?.map(item => (
                        <Col key={item.id}>
                            <SalaryItem
                                item={item}
                                showChange={showChange}
                                prefix={prefix}
                                parentData={data}
                            />
                        </Col>
                    ))}
                </Row>
            </If>
        </div>
    </div>
};

export default MonthSalaryTemplate;
